<template>
    <div id="app">
        <NewHead/>
        <div class="app-box">
            <Nav/>
            <LeftMenus/>
            <div class="app-main" element-loading-text="拼命加载中……">
                <!-- 动态组件 -->
                <transition name="el-fade-in">
                    <router-view />
                </transition>
            </div>
        </div>
        <More/>
    </div>
</template>
<script>
import 'element-ui/lib/theme-chalk/base.css';
import More from './components/More/more';
import LeftMenus from './components/Menus/leftMenus';
import NewHead from './components/Head/newHead';
import Nav from './components/Menus/nav';
import {mapGetters} from 'vuex';
export default {
    components: {
        LeftMenus,NewHead,Nav,More
    },
    computed: {
        ...mapGetters(['loadingGet'])
    }
};
</script>
<style lang="scss">
html,body,#app{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 12px;
}
.box{
    width: 100%;
    height: calc(100% - 60px);
}
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    background-color: #1e1e2f;
    .app-box{
        display: flex;
        height: calc(100% - 60px);
        width: 100%;
        .app-main{
            flex: auto;
            overflow: auto;
            margin-left: 80px;
                /*修改滚动条样式*/
            &::-webkit-scrollbar{
                width:10px;
                height:10px;
            /**/
            }
            &::-webkit-scrollbar-track{
            background: rgba($color: #000000, $alpha: 0);
            border-radius:2px;
            }
            &::-webkit-scrollbar-thumb{
                background: rgba($color: #ccc, $alpha: 0.5);
                border-radius:5px;
            }
            &::-webkit-scrollbar-thumb:hover{
            background: #333;
            }
            &::-webkit-scrollbar-corner{
                background: #179a16;
            }
        }
    }
}

#nav {
    padding: 30px;

    a {
        font-weight: bold;
        color: #2c3e50;

        &.router-link-exact-active {
            color: #42b983;
        }
    }
}

</style>
